<template>
  <view class="goods-item" v-if="item.skuList" :style="[customStyles]" @click="onJump()">
    <view class="img">
      <u--image :src="item.productImage.split(',')[0]" width="100%" height="100%" mode="widthFix"></u--image>
      <view class="disabled" v-if="item.skuList[0].quantity == 0">
        <view class="box">
          <view class="content">
            <view class="t1">售罄</view>
            <view class="t2">sold out</view>
          </view>
        </view>
      </view>
    </view>
    <view :class="['container',item.skuList[0].quantity == 0?'disabled':'']">
      <view class="product_name">
        <text class="tag" v-if="item.productType===2">一元购</text>
        <u--text :lines="2" :color="item.skuList[0].quantity == 0 ? '#999999': '#333333'" :text="item.productName"
                 size="14"></u--text>
      </view>

      <view class="price">
        <view class="p1">
          <text class="t">￥</text>
          {{ getPrice(item.skuList[0].sellerPrice, 1) }}
          <text
              style="font-size: 24rpx;">.{{ getPrice(item.skuList[0].sellerPrice, 2) }}
          </text>
        </view>
        <view class="p2" v-if="item.skuList[0].marketPrice">￥{{ item.skuList[0].marketPrice }}</view>
      </view>
      <view class="saleCount" v-if="item.saleCounts > 0">{{ item.saleCounts }}人购买</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'goods-item',
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    customStyles: {
      type: Object,
      default() {
        return {}
      }
    },
    url: {
      type: String
    },
    //商品类型 1正常商品  2分销商品
    productType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {};
  },
  methods: {
    // 页面跳转
    onJump() {
      let path = '/pages/goods/details?id=' + this.item.id;
      if (this.productType == 2) {
        path = path + "&skuId=" + this.item.distributionProductSkuList[0].skuId;
      }
      if (this.url) {
        path = this.url;
      }
      uni.navigateTo({
        url: path
      })
    },
    // 得到显示的金额
    getPrice(price, type) {
      let valMoney = price.toString().split(".");
      let decimals = "00";
      let showPrice = "0";
      if (valMoney.length == 2) {
        showPrice = valMoney[0];
        if (valMoney[1].length == 1) {
          decimals = valMoney[1] + "0"
        } else {
          decimals = valMoney[1];
        }
      } else {
        showPrice = valMoney[0];
      }
      if (type == 1) {
        return showPrice
      } else {
        return decimals
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.goods-item {
  background-color: #FFFFFF;
  width: 100%;
  border-radius: 15rpx;
  overflow: hidden;

  .img {
    width: 100%;
    min-height: 200rpx;
    position: relative;

    .disabled {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(244, 244, 244, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;

      .box {
        background-color: rgba(0, 0, 0, 0.5);
        width: 200rpx;
        height: 200rpx;
        border-radius: 100px;
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        &::after {
          content: '';
          display: block;
          width: 90%;
          height: 1rpx;
          background-color: rgba(255, 255, 255, 0.5);
          position: absolute;
          left: 5%;
          top: 55%;
        }

        .content {
          .t1 {
            font-size: 34rpx;
            margin-bottom: 20rpx;
          }

          .t2 {
            font-size: 24rpx;
          }
        }
      }
    }
  }

  .container {
    padding: 20rpx;

    .product_name {
      display: flex;

      .tag {
        font-size: 24rpx;
        color: #fff;
        font-weight: bold;
        background-color: #CF4A34;
        padding: 4rpx 10rpx;
        border-top-left-radius: 12rpx;
        border-bottom-right-radius: 12rpx;
        margin-right: 16rpx;
        max-height: 40rpx;
      }
    }

    .price {
      display: flex;
      align-items: center;
      margin-top: 10rpx;

      .p1 {
        font-size: 33rpx;
        color: $u-error;
        font-weight: bold;

        .t {
          font-size: 22rpx
        }
      }

      .p2 {
        text-decoration: line-through;
        color: #BBBBBB;
        margin-left: 20rpx;
        font-size: 22rpx;
      }
    }

    .saleCount {
      margin-top: 10rpx;
      color: #999999;
    }

    &.disabled {
      .price {
        .p1 {
          color: #999999;
        }
      }
    }
  }
}
</style>
